<template>
    <div id="fileSearch">
        <div>
            <p style="line-height: 30px; font-size: 12px;color: #666;"> <i class="fa fa-search" aria-hidden="true" style="color:#81a9cc;text-indent: 10px;"></i> "{{showdata}}" 中 <span style="color:red">{{searchInput}}</span> 的搜索结果：</p>
        </div>
        <div v-show="hasData" v-loading="searchLoading">
            <el-table
                    size="small"
                    :data="bigDataList"
                    @selection-change="selsChange"
                    style="font-family: '宋体','黑体'">
                <el-table-column type="selection" width="80"></el-table-column>
                <el-table-column prop="fileName" label="文件名" width="250">
                    <template slot-scope="scope">
                        <div class="folder-box" @click="handleCellClick(scope.row)">
                            <div style="display: flex;align-items: center">
                                <span :class="'file-icon '+scope.row.iconcls"></span>
                                <el-tooltip
                                        class="item"
                                        effect="dark"
                                        v-if="scope.row.fileName && $abslength(scope.row.fileName) > 35"
                                        :content="scope.row.fileName"
                                        placement="top-start"
                                >
                                    <span class="file-name">{{ scope.row.fileName.substring(0,$getFontShowLength(scope.row.fileName,35))+'...'}}</span>
                                </el-tooltip>
                                <span v-else class="file-name">{{scope.row.fileName}}</span>
                            </div>
                            <div class="folder-box-options" v-if="scope.row.fileType == 0">
                                <el-popover placement="right" width="90" trigger="hover">
                                    <ul class="settingOptions">
                                        <li @click.stop @click="renameHandle(scope.row)" v-show="isShow">
                                            <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                                            重命名
                                        </li>
                                        <li @click.stop @click="downloadFile(scope.row)">
                                            <i class="fa fa-cloud-download" aria-hidden="true"></i>
                                            下载
                                        </li>
                                        <li @click.stop @click="handleDelete(scope.row)" v-show="isShow">
                                            <i class="fa fa-trash-o" aria-hidden="true"></i>
                                            删除
                                        </li>
                                        <li @click.stop @click="previewFile(scope.row)">
                                            <i class="fa fa-file" aria-hidden="true"></i>
                                            文件预览
                                        </li>
                                        <li @click.stop @click="fileHistory(scope.row)" v-show="isShow">
                                            <i class="fa fa-history" aria-hidden="true"></i>
                                            历史记录
                                        </li>
                                        <li @click.stop @click="shareFile(scope.row)" v-show="isShow">
                                            <i class="fa fa-cloud-download" aria-hidden="true"></i>
                                            内部分享
                                        </li>
                                        <li @click.stop @click="OutShareFile(scope.row)" v-show="isShow">
                                            <i class="fa fa-file" aria-hidden="true"></i>
                                            外链分享
                                        </li>
                                        <li @click.stop @click="companyShare(scope.row)" v-show="isShow">
                                            <i class="fa fa-share-square-o" aria-hidden="true"></i>
                                            公司分享
                                        </li>
                                        <li @click.stop @click="partnerShare(scope.row)" v-show="isShow">
                                            <i class="fa fa-share" aria-hidden="true"></i>
                                            合作伙伴分享
                                        </li>
                                    </ul>
                                    <i slot="reference" class="el-icon-more-outline" style="cursor: pointer;" @click.stop></i>
                                </el-popover>
                            </div>
                            <div class="folder-box-options" v-else v-show="isShow">
                                <el-popover placement="right" width="90" trigger="hover">
                                    <ul class="settingOptions">
                                        <li @click.stop @click="handleDelete(scope.row)">
                                            <i class="fa fa-trash-o" aria-hidden="true"></i>
                                            删除
                                        </li>
                                        <li @click.stop @click="renameHandle(scope.row)">
                                            <i class="fa fa-pencil-square-o"
                                               aria-hidden="true"></i>
                                            重命名
                                        </li>
                                        <li @click.stop @click="shareFile(scope.row)">
                                            <i class="fa fa-cloud-download" aria-hidden="true"></i>
                                            内部分享
                                        </li>
                                        <li @click.stop @click="OutShareFile(scope.row)">
                                            <i class="fa fa-file" aria-hidden="true"></i>
                                            外链分享
                                        </li>
                                        <li @click.stop @click="companyShare(scope.row)">
                                            <i class="fa fa-share-square-o" aria-hidden="true"></i>
                                            公司分享
                                        </li>
                                        <li @click.stop @click="partnerShare(scope.row)">
                                            <i class="fa fa-share" aria-hidden="true"></i>
                                            合作伙伴分享
                                        </li>
                                    </ul>
                                    <i slot="reference" class="el-icon-more-outline" style="cursor: pointer;" @click.stop></i>
                                </el-popover>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="dirName" label="目录" width="230">
                    <template slot-scope="scope">
                        <el-tooltip
                                class="item"
                                effect="dark"
                                v-if="scope.row.fileName && $abslength(scope.row.dirName) > 35"
                                :content="scope.row.dirName"
                                placement="top-start">
                            <span class="dirPath" @click="handleCellClick(scope.row,'text')">{{ scope.row.dirName.substring(0,$getFontShowLength(scope.row.dirName,35))+'...'}}</span>
                        </el-tooltip>
                        <span class="dirPath" @click="handleCellClick(scope.row,'text')" v-else>{{scope.row.dirName}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建日期"></el-table-column>
                <el-table-column prop="updateTime" label="操作日期"></el-table-column>
                <el-table-column prop="size" label="大小" width="120">
                    <template slot-scope="scope">
                        <span v-if="scope.row.fileType == 1">-</span>
                        <span v-else>{{scope.row.size}}</span>
                    </template>
                </el-table-column>
                <el-table-column v-if="isShow">
                    <template slot-scope="scope" v-show="scope.row.isFavorites!=undefined">
                        <el-button
                                class="butt"
                                size="mini"
                                v-show="scope.row.isFavorites==0"
                                @click="collectFile(scope.row)"
                                plain>
                            <i class="fa fa-star-o" aria-hidden="true" ></i>
                        </el-button>
                        <el-button
                                class="butt"
                                size="mini"
                                v-show="scope.row.isFavorites==1"
                                @click="collectFile(scope.row)"
                                style="margin-left:0"
                                plain>
                            <i class="fa fa-star" aria-hidden="true" ></i>
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column min-width>
                    <template slot-scope="scope">
                        <div v-if="$store.state.loadingList.length>0&&$store.state.loadingList[0].id==scope.row.id">
                            <span>正在下载中：</span>
                            <el-progress :percentage='$store.state.loadingList[0].percentComplete' :show-text="true"></el-progress>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="display: flex;justify-content: center;margin-top:30px">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="bigdata1.page"
                        :page-sizes="[5,10,15]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="bigdata1.total">
                </el-pagination>
            </div>
        </div>
        <div v-show="!hasData"  v-loading="searchLoading" style="height:100%;width:100%;display: flex;margin-top:15%;align-items: center;flex-direction: column" >
            <img src="../../assets/img/search.png" alt="">
            <el-row style="font-size:18px;color:#B4B4B4;margin-top:9px;">暂无搜索结果</el-row>
            <el-row style="font-size:14px;color:#B4B4B4;margin-top:10px;">请更换新的名词重新尝试进行搜索</el-row>
        </div>
    </div>
</template>

<script>
  export default {
    props:["searchInput","keysForId"],
    name: "FileSearch",
    data(){
      return{
        isShow:sessionStorage.getItem('currentBox') == '我的文档',
        searchLoading:false,
        bigDataList:[],
        bigdata1:{},
        currentPage:1,
        currentRow:10,
        hasData:true,
        showdata:"我的文档",
        inputdata:"",
        tempDirId:0,
        isglobal:true,
        input:""
      }
    },
    methods:{
      collectFile(item){
        this.$emit("collectFile",item);
      },
      companyShare(item){
        this.$emit("companyShare",item);
      },
      handleDelete(item){
        this.$emit("handleDelete",item);
      },
      renameHandle(item) {
        this.$emit("renameHandle",item);
      },
      fileHistory(item){
        this.$emit("fileHistory",item);
      },
      previewFile(item){
        this.$emit("previewFile",item);
      },
      OutShareFile(item){
        this.$emit("outShareFile",item);
      },
      partnerShare(item){
        this.$emit("partnerShare",item);
      },
      shareFile(item){
        this.$emit("shareFile",item);
      },
      downloadFile(item){
        this.$emit('download',item);
      },
      searchCompanyFile(data){
        this.input = data;
        console.log("公司文档");
        this.searchLoading = true;
        this.bigDataList = [];
        if(this.input != ""){
          this.$http.post("/companyFile/getCompanyFileList",{
            page:this.currentPage,
            rows:this.currentRow,
            fileName:this.input,
          }).then(res=>{
            console.log("companyFileaaaaaaaa",res);
            let { data } = res;
            this.bigdata1 = {
              page:data.page,
              rows: data.rows,
              total: data.total
            }
            console.log(this.$store.state.moveNameList)
            if (data.list.length>0) {
              this.hasData = true;
              data.list.forEach((v, k) => {
                let suffixTemp = v.fileName.split(".");
                let file_icon
                if (suffixTemp.length > 1) {
                  suffixTemp = suffixTemp[suffixTemp.length - 1];
                  file_icon = 'icon_list_' + suffixTemp
                } else if (v.fileType === 0) {
                  suffixTemp = "";
                } else {
                  suffixTemp = null;
                }
                let str = "公司文档/";
                if(v.dirName){
                  v.dirName.forEach(val=>{
                    str =str + val.name + "/"
                  })
                }
                let idArray = [];
                if(v.dirName){
                  v.dirName.forEach(val=>{
                    idArray.push(val.id.split(".")[0])
                  })
                }
                let json = [];
                if(v.dirName){
                  v.dirName.forEach(val=>{
                    json.push({
                      label:val.name,
                      id:val.id.split(".")[1],
                      dirId:val.id.split(".")[0],
                    })
                  })
                }
                this.bigDataList.push({
                  id: v.fileId,
                  dirId: v.dirId,
                  userId:v.userId,
                  fileName: v.fileName,
                  peopleName: "暂无该字段",
                  size: v.fileSize == null ? "-" : this.$getFileSize(v.fileSize),
                  createTime: v.creatTime == null ? "暂无数据" : v.creatTime,
                  updateTime: v.updateTime == null ? v.creatTime : v.updateTime,
                  suffix: suffixTemp,
                  fileIcon: v.fileType == 1 ? 'icon_list_folder' : file_icon,
                  fileHash: v.fileHash,
                  fileType: v.fileType,
                  isFavorites:v.isFavorites,
                  dirName:str,
                  iconcls: v.fileType == 1 ? "icon_list_folder" : file_icon,
                  json:json,
                  idArray:idArray,
                  fileNameShow:this.getFontShowLength(v.fileName),
                  dirNameShow:this.getFontShowLength(str)
                });
              });
              if (res.status == 200) {
                this.searchLoading = false;
              }
            }else {
              this.hasData = false;
              this.searchLoading = false;
            }
          })
        }
        console.log(this.bigDataList)
      },
      searchMateData(data){
        this.input = data;
        console.log("同事分享");
        this.searchLoading = true;
        let tempUserDirId = sessionStorage.getItem("tempUserDirId");
        let fileId;
        let sendUserId;
        if(this.isglobal){
          fileId = 0;
          sendUserId = 0;
          // this.$message("请点击进入谁谁谁的分享再搜索哦");
          // this.setSearchInput("");
          // return;
        }else if(!this.isglobal && tempUserDirId != 0){
          fileId = 0;
          sendUserId = tempUserDirId;
          // if(this.tempDirId1 == -1){
          //   fileId = 0;
          //   sendUserId = tempUserDirId;
          // }
          // else{
          //   fileId = this.tempDirId1;
          //   sendUserId = tempUserDirId;
          // }
        }
        console.log("文件夹，用户",fileId,sendUserId);
        this.bigDataList = [];
        if(this.input != ""){
          this.$http.post("/share/getFileList",{
            page:this.currentPage,
            rows:this.currentRow,
            searchInfo:this.input,
            fileId:fileId,
            sendUserId:sendUserId,
          }).then(res=>{
            console.log("bigdataaaaaaaaa",res);
            let { data } = res;
            this.bigdata1 = {
              page:data.page,
              rows: data.rows,
              total: data.total
            }
            console.log(this.$store.state.moveNameList)
            if (data.list.length>0) {
              this.hasData = true;
              data.list.forEach((v, k) => {
                let suffixTemp = v.fileName.split(".");
                let file_icon
                if (suffixTemp.length > 1) {
                  suffixTemp = suffixTemp[suffixTemp.length - 1];
                  file_icon = 'icon_list_' + suffixTemp
                } else if (v.fileType === 0) {
                  suffixTemp = "";
                } else {
                  suffixTemp = null;
                }
                console.log("是否是全局的",this.isglobal);
                let str = "同事分享/";
                // if(this.isglobal){
                  str += v.realName + "的分享" + "/";
                // }
                if(v.dirName){
                  v.dirName.forEach(val=>{
                    str =str + val.name + "/"
                  })
                }
                let idArray = [];
                if(v.dirName){
                  v.dirName.forEach(val=>{
                    idArray.push(val.id.split(".")[0])
                  })
                }
                let json = [];
                if(this.isglobal){
                  json.push({
                    label:v.realName+"的分享",
                    id:v.userId,
                    dirId:v.userId,
                  })
                }
                if(v.dirName){
                  v.dirName.forEach(val=>{
                    json.push({
                      label:val.name,
                      id:val.id.split(".")[1],
                      dirId:val.id.split(".")[0],
                    })
                  })
                }
                this.bigDataList.push({
                  id: v.id,
                  dirId: v.dirId,
                  userId:v.userId,
                  fileName: v.fileName,
                  peopleName: "暂无该字段",
                  size: v.fileSize == null ? "-" : this.$getFileSize(v.fileSize),
                  createTime: v.creatTime == null ? "暂无数据" : v.creatTime,
                  updateTime: v.updateTime == null ? v.creatTime : v.updateTime,
                  suffix: suffixTemp,
                  fileIcon: v.fileType == 1 ? 'icon_list_folder' : file_icon,
                  fileHash: v.fileHash,
                  fileType: v.fileType,
                  isFavorites:v.isFavorites,
                  dirName:str,
                  iconcls: v.fileType == 1 ? "icon_list_folder" : file_icon,
                  json:json,
                  idArray:idArray,
                  fileNameShow:this.getFontShowLength(v.fileName),
                  dirNameShow:this.getFontShowLength(str)
                });
              });
              if (res.status == 200) {
                this.searchLoading = false;
              }
            }else {
              this.hasData = false;
              this.searchLoading = false;
            }
          })
        }
      },
      searchBigData(data){
        this.input = data;
        console.log("我的文档");
        console.log("tempdirid",this.tempDirId,this.isglobal);
        this.searchLoading = true;
        let id;
        if(this.isglobal){
          id = 0;
        }else{
          id = this.tempDirId;
        }
        this.bigDataList = [];
        this.$http.post("/file/getFileList",{
          page:this.currentPage,
          rows:this.currentRow,
          searchInfo:this.input,
          id:id,
        }).then(res=>{
          console.log("bigdataaaaaaaaa",res);
          let { data } = res;
          this.bigdata1 = {
            page:data.page,
            rows: data.rows,
            total: data.total
          }
          if (data.list.length>0) {
            this.hasData = true;
            data.list.forEach((v, k) => {
              let suffixTemp = v.fileName.split(".");
              let file_icon
              if (suffixTemp.length > 1) {
                suffixTemp = suffixTemp[suffixTemp.length - 1];
                file_icon = 'icon_list_' + suffixTemp
              } else if (v.fileType === 0) {
                suffixTemp = "";
              } else {
                suffixTemp = null;
              }
              let str = "我的文档/";
              if(v.dirName){
                v.dirName.forEach(val=>{
                  str =str + val.name + "/"
                })
              }
              let idArray = [];
              if(v.dirName){
                v.dirName.forEach(val=>{
                  idArray.push(val.id.split(".")[1])
                })
                idArray.push(v.dirId);
              }
              let json = [{
                label:"我的文档",
                id:null,
                dirId:null
              }];
              if(v.dirName){
                v.dirName.forEach(val=>{
                  json.push({
                    label:val.name,
                    id:val.id.split(".")[1],
                    dirId:val.id.split(".")[0],
                  })
                })
              }
              this.bigDataList.push({
                id: v.id,
                dirId: v.dirId,
                fileName: v.fileName,
                peopleName: "暂无该字段",
                size: v.fileSize == null ? "-" : this.$getFileSize(v.fileSize),
                createTime: v.creatTime == null ? "暂无数据" : v.creatTime,
                updateTime: v.updateTime == null ? v.creatTime : v.updateTime,
                suffix: suffixTemp,
                fileIcon: v.fileType == 1 ? 'icon_list_folder' : file_icon,
                fileHash: v.fileHash,
                fileType: v.fileType,
                isFavorites:v.isFavorites,
                dirName:str,
                json:json,
                idArray:idArray,
                iconcls: v.fileType == 1 ? "icon_list_folder" : file_icon,
                fileNameShow:this.getFontShowLength(v.fileName),
                dirNameShow:this.getFontShowLength(str)
              });
            });
            if (res.status == 200) {
              this.searchLoading = false;
            }
          }else {
            this.hasData = false;
            this.searchLoading = false;
          }
        })
      },
      getFontShowLength(str,emit){
        if(this.abslength(str)<=30){
          return str.length;
        }
        let tmp=0;
        let pattern = new RegExp("[\u4E00-\u9FA5]+");
        for(let i=0;i<str.length;i++){
          let a;
          if(pattern.test(str[i])==true){
            tmp+=2;
            a=-1;
          }else{
            tmp++;
            a=2;
          }
          if(tmp>30){
            console.log(i);
            return i;
          }
        }
      },
      abslength( str ) {
        return str.replace(/[^\x00-\xff]/ig, '**').length;
      },
      handleCellClick(row,text){
        console.log(row,text);
        if(sessionStorage.getItem("currentBox") == "同事共享"){
          row.idArray.unshift(row.userId)
          row.idArray.unshift(0)
        }else if(sessionStorage.getItem("currentBox") == "我的文档"){
          if(row.fileType == 1){
            row.idArray.push(row.id);
          }
        }else if(sessionStorage.getItem("currentBox") == "公司文档"){
          console.log(row);
          row.idArray.unshift(0)
        }
        console.log(row.idArray);
        this.$emit("handleCellClick",row)
      },
      selsChange(){},
      handleSizeChange(val){
        this.currentRow = val;
        if(this.showdata == "我的文档"){
          this.searchBigData(this.input);
        }else{
          this.searchMateData(this.input);
        }
      },
      handleCurrentChange(val){
        this.currentPage = val;
        if(this.showdata == "我的文档"){
          this.searchBigData(this.input);
        }else{
          this.searchMateData(this.input);
        }
      },
    }
  }
</script>

<style scoped lang="scss">
    #fileSearch{
        .el-pagination{
            padding-bottom:30px;
        }
        .file-icon{
            background: url("/static/bigicon.png") no-repeat -196px 0px;
            display: inline-block;
            width: 28px;
            height: 29px;
        }
        .folder-box {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .folder-box-options {
            display: none;
        }
        .folder-box:hover .folder-box-options {
            height: 23px;
            display: inline-block;
            float: right;
            font-weight: 700;
        }
        .file-name {
            margin-left: 10px;
        }
        .file-name:hover {
            text-decoration: underline;
            cursor: pointer;
        }
        .dirPath{
          text-decoration: underline;
        }
        .dirPath:hover {
            text-decoration: underline;
            cursor: pointer;
        }
    }
</style>
